/**
 * 定义一个名为BookTable的常量对象，用于创建书籍列表的表格组件
 * 该组件使用Vue.js的模板语法来渲染表格
 */
const CategoryTable = {
    // 组件名称
    name: 'CategoryTable',
    // 使用模板字符串定义HTML结构
    template: `
      <table>
        <thead>
        <tr>
          <th>分类名称</th>
          <th>状态</th>
          <th>描述</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 使用v-for指令遍历books数组，为每本书生成一行 -->
        <tr v-for="category in categories" :key="category.categoryId">
          <td>{{ category.categoryName }}</td>
          <td>
            <span :class="['status', category.status ? 'active' : 'inactive']">
              {{ category.status ? '启用' : '停用' }}
            </span>
          </td>
          <td>{{ category.description || '-' }}</td>
          <td>{{ formatDate(category.createdTime) }}</td>
          <td class="actions">
                <button style="margin-right: 5px" @click="$emit('edit', category)">编辑</button>
                <button @click="$emit('delete', category.categoryId)">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
    `,
    // 定义组件的属性
    props: {
        // 书籍数组，类型为Array，默认值为空数组
        categories: {
            type: Array,
            default: () => [],
        }
    },
    // 使用setup函数定义组件的响应式属性和方法
    setup() {

        const formatDate = (date) => {
            return new Date(date).toLocaleDateString();
        };
        // 返回定义的方法，使其能在模板中使用
        return { formatDate };
    }
};
